<template>
  <div class="layout-container">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px">
        <div class="logo">
          <img src="@/assets/logo.png" alt="Logo">
          <span>WeChat Pad</span>
        </div>
        <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical"
          :router="true"
          @select="handleSelect"
        >
          <!-- 仪表盘 - 所有角色可见 -->
          <el-menu-item index="/dashboard">
            <el-icon><Monitor /></el-icon>
            <span>仪表盘</span>
          </el-menu-item>
          
          <!-- 平台适配器 - 需要 VIEW_PLATFORMS 权限 -->
          <el-menu-item v-if="hasPermission(Permission.VIEW_PLATFORMS)" index="/platforms">
            <el-icon><Link /></el-icon>
            <span>平台适配器</span>
          </el-menu-item>
          
          <!-- 消息监控 - 需要 VIEW_MONITOR 权限 -->
          <el-menu-item v-if="hasPermission(Permission.VIEW_MONITOR)" index="/monitor">
            <el-icon><Bell /></el-icon>
            <span>消息监控</span>
          </el-menu-item>
          
          <!-- 用户 - 仅管理员和超级管理员可见 -->
          <el-menu-item v-if="isAdminOrAbove()" index="/user">
            <el-icon><User /></el-icon>
            <span>用户</span>
          </el-menu-item>
          
          <!-- 消息 - 需要 VIEW_MESSAGES 权限 -->
          <el-menu-item v-if="hasPermission(Permission.VIEW_MESSAGES)" index="/message">
            <el-icon><Message /></el-icon>
            <span>消息</span>
          </el-menu-item>
          
          <!-- 好友标签管理 - 需要 VIEW_FRIEND_TAGS 权限 -->
          <el-menu-item v-if="hasPermission(Permission.VIEW_FRIEND_TAGS)" index="/friend-tags">
            <el-icon><UserFilled /></el-icon>
            <span>好友管理</span>
          </el-menu-item>
          
          <!-- 素材库 - 需要 VIEW_MATERIAL_LIBRARY 权限 -->
          <el-menu-item v-if="hasPermission(Permission.VIEW_MATERIAL_LIBRARY)" index="/material-library">
            <el-icon><Document /></el-icon>
            <span>素材库</span>
          </el-menu-item>

          <!-- 官网联系人 - 所有角色可见 -->
          <el-menu-item index="/official-contacts">
            <el-icon><UserFilled /></el-icon>
            <span>官网联系人</span>
          </el-menu-item>

          <!-- 客户管理主菜单及子菜单 -->
          <el-sub-menu index="/customers">
            <template #title>
              <el-icon><User /></el-icon>
              <span>客户管理</span>
            </template>
            <el-menu-item index="/customers/public-sea">公海客户</el-menu-item>
            <el-menu-item index="/customers/effective-leads">有效线索</el-menu-item>
            <el-menu-item index="/customers/resource-pool">资源库</el-menu-item>
            <el-menu-item index="/customers/round-robin-tasks">轮呼任务</el-menu-item>
            <el-menu-item index="/customers/mine">我跟进的客户</el-menu-item>
            <el-menu-item index="/customers/list">我协助的客户</el-menu-item>
            <el-menu-item index="/customers/groups">预约上门客户</el-menu-item>
          </el-sub-menu>
          
          <!-- 设置 - 需要 VIEW_SETTINGS 权限 -->
          <el-menu-item v-if="hasPermission(Permission.VIEW_SETTINGS)" index="/settings">
            <el-icon><Setting /></el-icon>
            <span>设置</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主内容区 -->
      <el-container>
        <el-header height="60px">
          <div class="header-right">
            <el-dropdown v-if="isLoggedIn">
              <span class="user-info">
                {{ userInfo.username }} 
                <el-tag size="small" :type="roleTagType">{{ roleDisplayName }}</el-tag>
                <el-icon><ArrowDown /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="showUserInfo">个人信息</el-dropdown-item>
                  <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <div v-else class="login-section">
              <el-button type="primary" @click="goToLogin">登录</el-button>
            </div>
          </div>
        </el-header>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
    
    <!-- 用户信息对话框 -->
    <el-dialog v-model="userInfoDialogVisible" title="个人信息" width="400px">
      <div class="user-info-dialog">
        <div class="user-avatar">
          <el-avatar :size="80" :src="userInfo.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
        </div>
        <div class="user-details">
          <p><strong>用户名:</strong> {{ userInfo.username }}</p>
          <p><strong>角色:</strong> {{ roleDisplayName }}</p>
          <p><strong>权限:</strong></p>
          <div class="permissions-list">
            <el-tag v-for="permission in currentPermissions" :key="permission" size="small" class="permission-tag">
              {{ permission }}
            </el-tag>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import { 
  Monitor,
  User,
  UserFilled,
  Message,
  Setting,
  ArrowDown,
  Link,
  Bell,
  Document
} from '@element-plus/icons-vue'
import { Permission, Role, hasPermission, isAdminOrAbove, currentPermissions } from '@/utils/permission'
import { userInfo, clearUserState, isLoggedIn } from '@/utils/userStore'
// 移除自定义黑色 toast dock，统一使用 Element Plus Notification

const route = useRoute()
const router = useRouter()
const userInfoDialogVisible = ref(false)

const activeMenu = computed(() => route.path)

// 角色显示名称
const roleDisplayName = computed(() => {
  switch (userInfo.role) {
    case Role.SUPER_ADMIN:
      return '超级管理员'
    case Role.ADMIN:
      return '管理员'
    case Role.USER:
      return '普通用户'
    default:
      return '未知角色'
  }
})

// 角色标签类型
const roleTagType = computed(() => {
  switch (userInfo.role) {
    case Role.SUPER_ADMIN:
      return 'danger'
    case Role.ADMIN:
      return 'warning'
    case Role.USER:
      return 'info'
    default:
      return 'info'
  }
})

const handleSelect = (index: string) => {
  router.push(index)
}

// 显示用户信息
const showUserInfo = () => {
  userInfoDialogVisible.value = true
}

// 退出登录
const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    localStorage.removeItem('token')
    clearUserState()
    router.push('/login')
  }).catch(() => {})
}

// 跳转到登录页
const goToLogin = () => {
  router.push('/login')
}
</script>

<style scoped lang="scss">
.layout-container {
  height: 100vh;

  .el-container {
    height: 100%;
  }

  .el-aside {
    background-color: #304156;
    color: #fff;

    .logo {
      height: 60px;
      display: flex;
      align-items: center;
      padding: 0 20px;
      
      img {
        width: 32px;
        height: 32px;
        margin-right: 12px;
      }

      span {
        font-size: 18px;
        font-weight: 600;
        color: #fff;
      }
    }

    .el-menu {
      border-right: none;
      background-color: transparent;
    }

    .el-menu-item {
      color: #bfcbd9;

      &:hover, &.is-active {
        color: #fff;
        background-color: #263445;
      }
    }

    // 统一子菜单标题样式与菜单项一致（使用深度选择器以适配 scoped 样式）
    :deep(.el-sub-menu__title) {
      color: #bfcbd9 !important;

      &:hover {
        color: #fff;
        background-color: #263445;
      }
    }

    // 子菜单标题内图标与箭头颜色保持一致
    :deep(.el-sub-menu__title .el-icon),
    :deep(.el-sub-menu__title .el-sub-menu__icon-arrow) {
      color: inherit !important;
      opacity: 1 !important;
    }

    :deep(.el-sub-menu__title .el-icon svg) {
      fill: currentColor;
    }

    // 子菜单激活态（当有子项激活时）
    :deep(.el-sub-menu.is-active > .el-sub-menu__title),
    :deep(.is-active > .el-sub-menu__title) {
      color: #fff;
      background-color: #263445;
    }

    // 子菜单项配色与背景（展开后的条目）
    :deep(.el-menu--inline) {
      background-color: transparent !important;
    }

    :deep(.el-menu--inline .el-menu-item) {
      color: #a6b7c6; // 与顶级项区分的次级颜色
    }

    :deep(.el-menu--inline .el-menu-item:hover),
    :deep(.el-menu--inline .el-menu-item.is-active) {
      color: #fff;
      background-color: #263445;
    }

    :deep(.el-menu--inline .el-menu-item .el-icon) {
      color: inherit;
    }
  }

  .el-header {
    background-color: #fff;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;

    .header-right {
      .user-info {
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      
      .login-section {
        display: flex;
        align-items: center;
      }
    }
  }

  .el-main {
    background-color: #f0f2f5;
    padding: 20px;
  }
}

.user-info-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  .user-avatar {
    margin-bottom: 20px;
  }
  
  .user-details {
    width: 100%;
    
    p {
      margin: 8px 0;
    }
  }
  
  .permissions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    
    .permission-tag {
      margin-bottom: 6px;
    }
  }
}
</style>